<template>
  <div>
    <TypeNav/>
    <!--    Search搜索页-->
    <div class="main">
      <div class="py-container">
        <SearchTag
            :trademarkTitle="searchUrl.trademark"
            :attrTitle="searchUrl.props"
            @queryDeleteTag="queryDeleteTag"
            @paramsDeleteTag="paramsDeleteTag"
            @deleteTrademark="deleteTrademark"
            @deleteAttr="deleteAttr"
        />
        <SearchSelector @trademarkUrl="trademarkUrl" @attrvalueUrl="attrvalueUrl"/>
        <SearchDetails @searchListSort="searchListSort" :pageNo="searchUrl.pageNo" @changePageNo="changePageNo"/>
        <SearchHot/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";
import SearchTag from "@/pages/Search/components/SearchTag";
import SearchSelector from "@/pages/Search/components/SearchSelector";
import SearchDetails from "@/pages/Search/components/SearchDetails";
import SearchHot from "@/pages/Search/components/SearchHot";

export default {
  name: "Search",
  components: {SearchHot, SearchDetails, SearchSelector, SearchTag},
  data() {
    return {
      searchUrl: {   // 初始化的默认参数
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 50,
        props: [],
        trademark: "",
      }
    }
  },
  mounted() {
    //因为进入搜索页只有两个场景 1. 点击三级分类   2.点击搜索按钮
    //所以初始化请求的时候 一定有params或者query参数
    //我们要在search发送初始化请求之前,先把params或者query参数放在searchParams参数中
    // 路由跳转时  获取对应的搜索参数  并替换默认的
    this.initUrl();
    // 发送请求获取对应的搜索数据 初始化的时候就发送请求
    this.getSearchList(this.searchUrl)
  },
  methods: {
    ...mapActions('search', ['getSearchList']),
    //2- 初始化请求之前的参数处理函数
    initUrl() {
      // 获取query参数
      const {
        category1Id = '',
        category2Id = '',
        category3Id = '',
        categoryName = ''
      } = this.$route.query;
      // 获取params参数
      const {searchKey = ''} = this.$route.params;
      // 合并params参数和query参数
      this.searchUrl = {
        ...this.searchUrl,
        category1Id,
        category2Id,
        category3Id,
        categoryName,
        keyword: searchKey
      }
    },
    //3- 点击品牌收集参数  发送求 获取对应数据并渲染页面 （组件传参 字传父）
    trademarkUrl(tm) {
      console.log(tm, 'tm');
      this.searchUrl.trademark = `${tm.tmId}:${tm.tmName}`;
      this.getSearchList(this.searchUrl)
    },
    //4- 点击属性收集参数  发送求 获取对应数据并渲染页面 （组件传参 字传父）
    attrvalueUrl(attr) {
      // console.log(attr)
      const {attrId, attrName, attrValue} = attr;
      // 判断查询属性参数搜索时 是够重复
      if (this.searchUrl.props.includes(`${attrId}:${attrValue}:${attrName}`)) return
      this.searchUrl.props.push(`${attrId}:${attrValue}:${attrName}`);
      this.getSearchList(this.searchUrl)
    },
    //5- 删除Tag内容面板的query 动态路由重新导航
    queryDeleteTag() {
      // 删除query参数
      this.searchUrl = {
        ...this.searchUrl,
        category1Id: '',
        category2Id: '',
        category3Id: '',
        categoryName: '',
      };
      // 路由重新跳转
      const params = this.$route.params
      console.log(params)
      this.$router.push({
        name: 'Search',
        params
      })
    },
    //6- 删除Tag内容面板的params 动态路由重新导航
    paramsDeleteTag() {
      // 删除params参数
      this.searchUrl = {
        ...this.searchUrl,
        keyword: "",
      };
      const query = this.$route.query;
      // console.log(query)
      this.$bus.$emit('removeValue')
      //重新发送请求
      this.$router.push({
        name: "Search",
        query
      });
    },
    //7. 删除品牌tag的 自定义事件回调
    deleteTrademark() {
      //请求参数
      this.searchUrl = {
        ...this.searchUrl,
        trademark: "",
      };
      //重新发送请求
      this.getSearchList(this.searchUrl);
    },
    //8.删除 属性的tag的 自定义事件回调
    deleteAttr(tag) {
      //处理参数
      this.searchUrl.props = this.searchUrl.props.filter(
          (item) => tag != item
      );
      //重新发送请求
      this.getSearchList(this.searchUrl);
    },
    // 9- 排序的回调 自定义事件回调
    searchListSort(order) {
      this.searchUrl.order = order;
      //重新发送请求
      this.getSearchList(this.searchUrl);
    },
    // 10- 点击对应页码 渲染对应数据
    changePageNo(nowPage) {
      this.searchUrl.pageNo = nowPage
      // 发送请求获取对应的搜索数据
      this.getSearchList(this.searchUrl);
    }
  },
  watch: {
    $route() {
      //只要再次点击了三级分类和搜索按钮,我们要先改变searchParams参数,然后再重新发送请求
      this.initUrl()
      this.getSearchList(this.searchUrl)
    }
  }
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;

  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
